<extend name="$home_public_template"/>

<block name="style">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/slideshow.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/slideshow/normalize.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/slideshow/jquery.vm-carousel.css">
<script src="__PUBLIC__/Home/js/slideshow/modernizr.js"></script>
<!-- <link rel="stylesheet" href="__PUBLIC__/Home/css/bootstrap.min.css"> -->
<style>
    .item ul li img{
        float: left;
        margin-right:5px;
        padding-bottom: 5px;
    }
    #banner_tabs{
        top:80px;
    }
    h2 {
         margin-bottom: 40px;
         margin-top: 40px;
      }
    .vmc-centered{ padding: 10px 0; }
    .vmc-centered img { transition: all 0.3s ease; }
    .vmc-centered .vmc_active img { transform: scale(1.2); }
</style>

</block>

<block name="body">
    <!-- 轮播广告大图 -->
  <div id="banner_tabs" class="flexslider">
    <ul class="slides">
      <!-- 轮播图开始遍历 -->
      <foreach name="list" item="val">
      <li>
        <a title="" target="_blank" href="#">
          <img width="1920" height="830" alt="{$val.alt}" style="background: url(./Uploads{$val.image_path}) no-repeat center;" src="__PUBLIC__/Home/images/slideshow/alpha.png">
        </a>
      </li>
      </foreach>
      <!-- 轮播图遍历 -->
    </ul>
    <!-- 翻页按钮 -->
    <ul class="flex-direction-nav">
      <li><a class="flex-prev" href="javascript:;"></a></li>
      <li><a class="flex-next" href="javascript:;"></a></li>
    </ul>
  </div>
<!-- 轮播大图 -->

<!-- 热销商品轮播图 ,后期查找商品销售数据，制成二维数组，进行遍历即可-->
    <div class="productBox">
        <div class="sildeShowBox">
            <div style="clear:both;margin-top:600px;" attr="待删的"></div>
            <!-- <div class="slide-pic"></div> -->
        </div>
        <div class="normalShowBox">
            <div class="col-first">
                <a href="{:U('Home/GoodsClassify/classify/id/1')}">
                	<img src="__PUBLIC__/Home/images/index/ClimaHeat-M-468-262.jpg"/>
                </a>
                <a href="#" class="s1">状态不下线</a>
                <a href="#" class="s2">探索男子秋季夹克系列</a>
            </div>
            <div class="col-last">
                <a href="{:U('Home/GoodsClassify/classify/id/2')}"><img src="__PUBLIC__/Home/images/index/ClimaHeat-W-468-262.jpg"/></a>
                <a href="#" class="s1">女子Z.N.E.</a>
                <a href="#" class="s2">探索 女子Z.N.E.系列</a>
            </div>
            <div class="col-first">
                <a href="{:U('Home/GoodsClassify/classify/id/3')}">
                	<img src="__PUBLIC__/Home/images/index/468-262_32 (1).jpg"/>
                </a>
                <a href="#" class="s1">孩子随经典而跑</a>
                <a href="#" class="s2">探索Best Seller</a>
            </div>
            <div class="col-last">
                <a href="{:U('Home/GoodsClassify/classify/id/23')}"><img src="__PUBLIC__/Home/images/index/cloth-pc.jpg"/></a>
                <a href="#" class="s1">为运动而生</a>
                <a href="#" class="s2">探索miadidas系列</a>
            </div>
            <div class="cb"></div>
        </div>

        <div class="hotSlideShowBox carousel slide" id="myCarousel">
          <h3>最受欢迎的产品</h3>
            <div class="container">
               <ul class="vmcarousel-normal vmcarousel" style="margin-left: 0;">
                  <foreach name="hot_goods" item="vo">
                  <li class="pro-box">
                      <img src="{$vo.image_path}" class="pro-img" onclick="jump(this)" value="{:U('GoodsDetail/detail',array('id'=>$vo['goods_id']))}" style="cursor:pointer;"/>
                      <a href="#" class="pro-link" onclick="jump(this)" value="{:U('GoodsDetail/detail',array('id'=>$vo['goods_id']))}">{$vo.goods_name}
                      </a>
                      <span class="price">&yen;{$vo.price}</span>
                  </li>
                  </foreach>
               </ul>
            </div>
        </div>
    </div>

    <div style="margin-bottom:30px;"></div>
<!-- 热销商品轮播图 -->
    
</block>

<block name="script">
    <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/jquery-1.10.2.min.js"></script>
    <!-- <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/jquery-1.7.min.js"></script> -->
    <script type="text/javascript" src="__PUBLIC__/Home/js/slideshow/slider.js"></script>
    <script type="text/javascript">
    $(function() {
      var bannerSlider = new Slider($('#banner_tabs'), {
        time: 5000,
        delay: 400,
        event: 'hover',
        auto: true,
        mode: 'fade',
        controller: $('#bannerCtrl'),
        activeControllerCls: 'active'
      });
      $('#banner_tabs .flex-prev').click(function() {
        bannerSlider.prev()
      });
      $('#banner_tabs .flex-next').click(function() {
        bannerSlider.next()
      });
    })
    </script>

    <script src="__PUBLIC__/Home/js/slideshow/jquery-1.10.2.min.js"></script>
    <script src="__PUBLIC__/Home/js/slideshow/bootstrap.min.js"></script>
    <script src="__PUBLIC__/Home/js/slideshow/jquery-bigSlider.js"></script>

    <script src="__PUBLIC__/Home/js/slideshow/jquery.vm-carousel.js"></script>
    <script type="text/javascript">
        jQuery(function($){
              $('.vmcarousel-centered').vmcarousel({
                 centered: true,
                 start_item: 2,
                 autoplay: false,
                 infinite: false
              });

              $('.vmcarousel-centered-infitine').vmcarousel({
                 centered: true,
                 start_item: 1,
                 autoplay: false,
                 infinite: true
              });

              $('.vmcarousel-normal').vmcarousel({
                 centered: false,
                 start_item: 0,
                 autoplay: false,
                 infinite: true
              });
           });
    </script>
    <script>
      function jump(obj){
        // alert($(obj).attr('value'));
        var url_path = $(obj).attr('value');
        window.location.href = url_path;
      }
    </script>
</block>

